<template>
  <div class="box" v-transition>
    <Title :place="place" :icon="icon" @handleTitleClick="handleTitleClick" :title="title_home"></Title>
    <div class="timeSlect_layout">
      <div class="time_left">
        <div>{{dateParam}}</div>
        <div class="pay">
          <span>{{this.Lang[this.$store.state.lang].moreBill_t1}} :Ks&nbsp; {{amountBill.income}}</span>
          <span>{{this.Lang[this.$store.state.lang].moreBill_t2}} :Ks&nbsp; {{amountBill.expend}}</span>
        </div>
      </div>
      <div @click="openRili" class="time_right">
        <span class="mintui">&#xe685;</span>
      </div>
    </div>
    <div class="moreBill">
      <More
        @pullup="pullup"
        @refresh="refresh"
        :height="height"
        @getNum="getNum"
        :numFlag="numFlag"
        :list="data"
        @junmpDetail="junmpDetail"
      ></More>
    </div>

    <mt-datetime-picker
      ref="pickerData"
      v-model="dateValue"
      type="date"
      year-format="{value} "
      month-format="{value} "
      :confirmText="confirmText"
      :cancelText="cancelText"
      @confirm="handleConfirm"
      :endDate="endDate"
      :startDate="startDate"
    ></mt-datetime-picker>
  </div>
</template>
<script>
import Title from "../layout/Title";
import common from "../common/index";
import { getIndexListInfo, getInfoAmountBill } from "../Ajax/index";
import More from "../layout/MoreBill";
export default {
  name: "MoreBill",
  components: {
    Title,
    More
  },
  data() {
    return {
      place: "left",
      icon: "fanhui",
      title_home: this.Lang[this.$store.state.lang].moreBill_t8,
      dateValue: new Date(),
      year: "",
      month: "",

      dateParam:
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1 > 10
          ? new Date().getMonth() + 1
          : "0" + (new Date().getMonth() + 1)),

      endDate: new Date(),
      startDate: new Date("2015-01"),
      confirmText: this.Lang[this.$store.state.lang].moreBill_t3,
      cancelText: this.Lang[this.$store.state.lang].moreBill_t4,
      height:
        (document.documentElement.clientHeight || document.body.clientHeight) -
        40 -
        70,

      page: "", //当前页面账单 最大 个数
      offset: 1,
      data: [],
      numFlag: true, //非饱和 页面数据
      amountBill: {
        expend: "",
        income: ""
      }
    };
  },
  mounted() {
    this.initList();

    //console.log(      )
    //
  },
  methods: {
    pullup() {
      this.offset = this.offset + 1;
      this.initList();
    },
    refresh() {
      this.data = [];
      this.offset = 1;
      this.initList();
    },
    handleTitleClick() {
      this.$router.go(-1);
    },
    handleConfirm(value) {
      this.data = [];
      this.year = value.getFullYear();
      this.month = value.getMonth() + 1;
      this.dateParam =
        this.year + "-" + (this.month > 10 ? this.month : "0" + this.month);

      this.initList();

      //   //console.log(this.dateParam);
    },
    openRili() {
      this.$refs.pickerData.open();
    },
    getNum(num) {
      //   alert(num);
      this.page = num + 1; //必须比 num 大
    },
    initList() {
      setTimeout(() => {
        let params = common.formdata({
          fuid: this.$store.state.userInfo.fuid,
          timeStamp: new Date().getTime(),
          // obj: this.$store.state.userInfo.fuid,
          offset: this.offset,
          limit: this.page,
          month: this.dateParam
        });

        // console.log(this.dateParam)
        // //console.log(params.pageInfo)

        new Promise((resolve, reject) => {
          resolve();
        })
          .then(() => {
            getInfoAmountBill(params)
              .then(res => {
                this.amountBill = {
                  expend: res.data.datas.expend,
                  income: res.data.datas.income
                };
              })
              .catch(err => {
                common.toast({
                  message: this.Lang[this.$store.state.lang][err] || err,
                  time: 2000
                });
              });
          })
          .then(() => {
            // console.log(params);
            getIndexListInfo(params)
              .then(res => {
                if (res.data.datas.userOrderList.data.length == 0) {
                  //   this.offset = parseInt(this.offset - 1);
                  //  alert("无更多数据了")
                  common.toast({
                    message: this.Lang[this.$store.state.lang].bill_nomore,
                    time: 2000
                  });
                } else {
                  this.data = this.data.concat(
                    res.data.datas.userOrderList.data
                  );
                }

                if (
                  res.data.datas.userOrderList.data.length < parseInt(this.page)
                ) {
                  this.numFlag = false;
                }
              })
              .catch(err => {
                common.toast({
                  message: this.Lang[this.$store.state.lang][err] || err,
                  time: 2000
                });
              });
          });
      }, 200);
    },
    junmpDetail(data) {
      // alert(0)

      this.$router.push({
        path: "./detail"
      });
    }
  }
};
</script>
<style  scoped>
.timeSlect_layout {
  width: 100%;
  height: 70px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.time_left div:nth-child(2) {
  padding-top: 10px;
  font-size: 12px;
  color: #8b8b8b;
}
.time_left div:nth-child(1) {
  font-size: 20px;
  color: #676767;
}
.time_left .pay span:nth-child(2) {
  margin-left: 20px;
}
.time_right span {
  font-size: 28px;
}
.moreBill {
  width: 100%;
}
</style>